.split-cta{

    // ============================================================================
    //   Variables
    // ============================================================================

    // $some-example-color: #f00;

    // ============================================================================
    //   Group
    // ============================================================================

    &s{
      position:relative;
    }

    // ============================================================================
    //   Single
    // ============================================================================

    overflow:hidden;
    position:relative;
    background: $color-comet;
    text-align: center;
    // padding: 30px;
    height: 240px;
    background-position: center center;
    background-repeat: no-repeat;

    // ============================================================================
    //   Child Elements
    // ============================================================================

    &:before{
      content: "";
      position:absolute;
      width: 100%; height: 100%;
      left: 50%; top:50%;
      transform: translate(-50%,-50%);
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

      // transition: all 250ms ease;
      transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .container{
        @include vertical-align();
    }

    .h3{
      max-width: 300px;
      margin: 1em auto;
    }

    .btn{ 
      width: 178px; 
      margin-left: auto; 
      margin-right: auto; 
    }

    // ============================================================================
    //   States
    // ============================================================================

    html.no-touch &:hover{
      &:before{
        opacity:0.5;
        transform: translate(-50%,-50%) scale(1.2);
      }
    }

    html.no-touch & .btn--white--outline:hover{
      color: $color-comet;
    }

    // ============================================================================
    //   Media Queries
    // ============================================================================

    @include break-min($break-tablet){
        &s{ display:flex; }

        height: 300px;

        html.lte-ie9 &s{
            @include clearfix();
            .split-cta{
                float:left;
                width: 50%;
            }
        }

        flex: 1;

        .container{
          max-width: 550px;
        }
        .h5{ margin: 0 0 0.5em; }
        .h3{
          max-width: none;
          margin: 0.4em auto 0.65em;
        }
    }

    @include break-min($break-desktop){
        overflow:hidden;
    }


    // ============================================================================
    //   Modifiers
    // ============================================================================

    &--blue{
      background: $color-parse-blue;
      html.no-touch & .btn--white--outline:hover{
        color: $color-parse-blue;
      }
    }
    &--green{
      background: $color-carib-green;
      html.no-touch & .btn--white--outline:hover{
        color: $color-carib-green;
      }
    }
    &--red{
      background: $color-rad-red;
      html.no-touch & .btn--white--outline:hover{
        color: $color-rad-red;
      }
    }
    &--white{
      background: white;
    }
    &--desktop{
      background-color: $color-rad-red;

      &:before{
        width: 521px; height: 217px;
        background-image: url(/assets/images/split-ctas/red-desk.png);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-rad-red;
      }
    }
    &--mobile{
      background-color: $color-carib-green;

      &:before{
        width: 495px; height: 300px;
        background-image: url(/assets/images/split-ctas/mobile.png);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-carib-green;
      }
    }
    &--pricing{
      background-color: $color-parse-blue;

      &:before{
        width: 440px; height: 241px;
        background-image: url(/assets/images/split-ctas/blue-layers.png);
      }
      html.no-touch & .btn--white--outline:hover{
        color: $color-parse-blue;
      }
    }
    &--pricing-core{
      background-color: $color-carib-green;

      &:before{
        width: 385px; height: 277px;
        background-image: url(/assets/images/split-ctas/magnifying-hand.png);
      }
      html.no-touch & .btn--white--outline:hover{
        color: $color-carib-green;
      }
    }
    &--core{
      background: $color-core-blue;

      &:before{
        width: 339px; height: 300px;
        background-image: url(/assets/images/split-ctas/core.png);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-core-blue;
      }

      @include break-min($break-tablet){
        .h3{ max-width: 400px; }
      }
    }
    &--analytics{
      background: $color-analytics-blue;

      &:before{
        width: 366px; height: 298px;
        background-image: url(/assets/images/split-ctas/analytics.png);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-analytics-blue;
      }
    }
    &--push{
      background-color: $color-push-blue;

      &:before{
        width: 418px; height: 300px;
        background-image: url(/assets/images/split-ctas/push.png);
      }
      
      html.no-touch & .btn--white--outline:hover{
        color: $color-push-blue;
      }
    }
    &--products{
      background: $color-comet;

      &:before{
        width: 366px; height: 298px;
        background-image: url(/assets/images/split-ctas/products.jpg);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-comet;
      }
    }
    &--customers{
      background: $color-carib-green;

      &:before{
    background-size: cover;
    opacity: .1;
    width: 120%;
    height: 120%;
        background-image: url(/assets/images/video-posters/customers.jpg);
      }

      html.no-touch & .btn--white--outline:hover{
        color: $color-carib-green;
      }
    }  
}
